<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>foreach</title>
	<script src="lib/vue-2.1.3-min.js"></script>
</head>
<body>
	<div id="todolist">
		<ul>
			<li v-for="item in todolist">
				{{item}}
			</li>
		</ul>
		<ul>
			<todo-item v-for="item in todolist" v-bind:todo="item"></todo-item>
		</ul>
		

		<input type="text" v-model="addItem"> <button @click="addItemHandler">add</button>
	</div>


	<script>
		Vue.component("todo-item", {
			props: ["todo"],
			template: "<li>{{ todo }}</li>"
		});

		var v = new Vue({
			el: "#todolist",
			data: {
				todolist: ["study java", "study c#"],
				addItem:"",
			},
			methods: {
				addItemHandler: function() {
					this.todolist.push(this.addItem);
					this.addItem = "";
				}
			},
			mounted: function() {
				this.todolist.push("mounted");
			},
			created: function() {
				this.todolist.push("created");
			}
		});

		
	</script>

	
</body>
</html>